<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li>{{formateTime()}}</li>
            <li>{{formateTime()}}</li>
            <li>{{formateTime()}}</li>
            <li>{{formateTime()}}</li>
        </ul>
        <button @click="changeTime">点击</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                time: '2020-12-12 12:12:12',

                obj: {
                    name: '张三',
                    age: 20,
                    tel: 110
                }
            },
            computed: {// computed是计算属性 他得出值可以缓存 但是computed得到的值只有当依赖的数据发生变化时才会再次执行逻辑
                // formateTime() { // this.time就是formateTime依赖的数据
                //     // console.log(1)
                //     let date = new Date(this.time)

                //     let year = date.getFullYear();

                //     let month = date.getMonth() + 1;

                //     let day = date.getDate()

                //     return `${year}-${month}-${day}`
                // }

                formateTime:{
                    get() {

                    },

                    set() {
                        
                    }
                }
            }, 
            created() {
                console.log(this)
            },
            methods: {
                changeTime() {
                    // this.time = new Date()
                    // this.obj.name = '李四'
                    this.obj.age = 21
                },

                formateTime() { // this.time就是formateTime依赖的数据 methods的结果不能缓存 
                    console.log(1)
                    let date = new Date(this.time)

                    let year = date.getFullYear();

                    let month = date.getMonth() + 1;

                    let day = date.getDate()

                    return `${year}-${month}-${day}`
                }
            },
            watch: { // 监听数据、computed和路由的变化发生的变化
                // time(to, from) {
                //     console.log(to, from)
                // }

                // 'obj.name'(to, from) {
                //     console.log(to, from)
                // }

                obj: {
                    deep: true, // 开启数据的深度监听
                    handler(val) { // 监听到数据变化的回调函数
                        console.log(val)
                    },
                    immediate: true // 是否立即监听一次
                }
            }
        })
    </script>
</body>
</html>